/*
    Copyright 2011 - Tommi Laukkanen (www.substanceofcode.com)

    This file is part of NewsFlow.

    NewsFlow is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    NewsFlow is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License
    along with NewsFlow. If not, see <http://www.gnu.org/licenses/>.
*/

import Qt 4.7

Item {
    id: newsPage
    signal hide()
    signal markAsFavourite()
    signal markAsRead(bool showWaitingIndicator)
    signal markAsUnread()
    signal addTags(string tags)
    signal openInBrowser()
    signal shareToTwitter()
    signal shareToFacebook()
    signal loadNext()
    signal toggleFullscreen()
    property ListModel model
    property int index
    property string title: ""
    property string description: ""
    property string identifier: ""
    property string source: ""
    property string published: ""

    anchors.fill: parent

    function moveToNext() {
        newsPage.index++;
        var item = newsPage.model.get(newsPage.index);
        item.isRead = true;
        if(item.title.indexOf("Load more...")>-1) {
            newsPage.loadNext();
            newsPage.hide();
        } else {
            next.state = "next";
            nextNewsTitle.text = item.title;
            nextSummary.text = "Loading..."; //item.desc;
            nextAuthorName.text = item.published;
            nextSourceLabel.text = item.source;
            next.state = "shown";
        }
    }

    function moveToPrevious() {
        if(newsPage.index>0) {
            newsPage.index--;
            var item = newsPage.model.get(newsPage.index);
            item.isRead = true;
            next.state = "previous";
            nextNewsTitle.text = item.title;
            nextSummary.text = "Loading..."; //item.desc;
            nextAuthorName.text = item.published;
            nextSourceLabel.text = item.source;
            next.z = -2;
            next.state = "shown";
        }
    }

    Rectangle {
        id: newsContent
        anchors.fill: parent
        state: "toolbarHidden"
        color:  theme.backGroundColor
        z: -200

        Rectangle {
            width: parent.width
            height: parent.height
            id: newsSlider
            z: 2
            color: theme.backGroundColor

            Flickable {
                id: newsFlickable
                width: parent.width
                height: parent.height
                contentWidth: parent.width
                contentHeight: newsTitleAndDescription.height + 64

                Column {
                    id: newsTitleAndDescription
                    x: 8
                    y: 8
                    width: parent.width - 16
                    spacing: 8

                    Text {
                        id: newsTitle
                        width:  parent.width
                        font.bold: true
                        color: theme.textColor
                        font.pixelSize: 22
                        wrapMode: Text.Wrap
                        text: "<span>" + title + "</span>"
                    }

                    Rectangle {
                        width: parent.width
                        height: sourceLabel.height
                        color: theme.backGroundColor

                        Text {
                            id: sourceLabel
                            color: theme.menuSubTextColor
                            font.pixelSize: 16
                            width: parent.width
                            text: source
                            wrapMode: Text.Wrap
                        }

                        Text {
                            id: authorName
                            color: theme.menuSubTextColor
                            font.pixelSize: 16
                            width: parent.width
                            text: published
                            wrapMode: Text.Wrap
                            horizontalAlignment: Text.AlignRight
                        }
                    }

                    Text {
                        id: summary
                        width: parent.width
                        wrapMode: Text.Wrap
                        text: description
                        font.pixelSize: 18
                        color: theme.textColor
                    }

                }

                CustomGestureArea {
                     anchors.fill: parent
                     onSwipeLeft: {
                         console.log("Swiped left");
                         newsPage.moveToNext();
                     }
                     onSwipeRight: {
                         console.log("Swiped right");
                         newsPage.moveToPrevious();
                     }
                 }
            }
        }

        Rectangle {
            id: shadow
            anchors.fill: parent
            z:3
            color: theme.backGroundColor
            opacity: 0
        }

        Rectangle {
            id: next
            width: parent.width
            height: parent.height
            x: 0 - width
            visible: false
            state: "next"
            color: theme.backGroundColor
            z: 4

            Column {
                x: 8
                y: 8
                width: parent.width - 16
                spacing: 8

                Text {
                    id: nextNewsTitle
                    width:  parent.width
                    font.bold: true
                    font.pixelSize: 22
                    wrapMode: Text.Wrap
                    color: theme.textColor
                    text: ""
                }

                Rectangle {
                    width: parent.width
                    height: sourceLabel.height
                    color: theme.backGroundColor

                    Text {
                        id: nextSourceLabel
                        color: theme.menuSubTextColor
                        font.pixelSize: 16
                        width: parent.width
                        text: ""
                        wrapMode: Text.Wrap
                    }

                    Text {
                        id: nextAuthorName
                        color: theme.menuSubTextColor
                        font.pixelSize: 16
                        width: parent.width
                        text: ""
                        wrapMode: Text.Wrap
                        horizontalAlignment: Text.AlignRight
                    }
                }
                Text {
                    id: nextSummary
                    width: parent.width
                    wrapMode: Text.Wrap
                    text: ""
                    color: theme.textColor
                    font.pixelSize: 18
                }

            }

            states: [
                State {
                    name: "previous"
                    PropertyChanges {
                        target: next
                        x: 0
                    }
                },
                State {
                    name: "next"
                    PropertyChanges {
                        target: next
                        x: next.width
                    }
                },
                State {
                    name: "shown"
                    changes:  [
                        PropertyChanges {
                            target: next
                            x: 0
                        }
                    ]
                }
            ]

            transitions: [
                Transition {
                    from: "next"
                    to: "shown"
                    SequentialAnimation {
                        ScriptAction {
                            script: {
                                next.visible = true;
                                shadow.visible = true;
                                shadow.opacity = 0;
                            }
                        }
                        ParallelAnimation {
                            NumberAnimation { target: shadow; property: "opacity"; from: 0; to: 0.3; duration: 300; }
                            NumberAnimation { target: next; property: "x"; duration: 600; easing.type: "OutCubic" }
                        }
                        ScriptAction {
                            script: {
                                shadow.visible = false;
                                shadow.opacity = 0;
                                var item = newsPage.model.get(newsPage.index);
                                newsPage.title = nextNewsTitle.text;
                                newsPage.description = item.desc;
                                newsPage.published = nextAuthorName.text;
                                newsPage.source = nextSourceLabel.text;
                                newsFlickable.contentY = 0;
                                next.visible = false;
                                newsPage.markAsRead(false);

                                if(newsPage.model.count>newsPage.index) {
                                    var item = newsPage.model.get(newsPage.index+1);
                                    nextNewsTitle.text = item.title;
                                    nextSummary.text = "Loading...";
                                    nextAuthorName.text = item.published;
                                    nextSourceLabel.text = item.source;
                                }
                            }
                        }
                    }
                },
                Transition {
                    from: "previous"
                    to: "shown"
                    SequentialAnimation {
                        ScriptAction {
                            script: {
                                next.z = 0;
                                next.x = 0;
                                next.visible = true;
                                shadow.z = 1;
                                shadow.visible = true;
                            }
                        }
                        ParallelAnimation {
                            NumberAnimation { target: shadow; property: "opacity"; from: 0.3; to: 0; duration: 400; }
                            NumberAnimation { target: newsSlider; property: "x"; from: 0; to: newsSlider.width; duration: 600; easing.type: "OutCubic" }
                        }
                        ScriptAction {
                            script: {
                                shadow.visible = false;
                                shadow.opacity = 0;
                                shadow.z = 3;
                                newsFlickable.contentY = 0;
                                var item = newsPage.model.get(newsPage.index);
                                newsPage.title = nextNewsTitle.text;
                                newsPage.description = item.desc;
                                newsPage.published = nextAuthorName.text;
                                newsPage.source = nextSourceLabel.text;
                                newsSlider.x = 0
                                next.visible = false;
                                next.z = 4;
                                newsPage.markAsRead(false);

                                if(newsPage.index>0) {
                                    var item = newsPage.model.get(newsPage.index-1);
                                    nextNewsTitle.text = item.title;
                                    nextSummary.text = "Loading..."; // item.desc;
                                    nextAuthorName.text = item.published;
                                    nextSourceLabel.text = item.source;

                                }
                            }
                        }
                    }
                }
            ]
        }

        Image {
            source: "../pics/bottom-shadow.png"
            height: 64
            width: parent.width
            y: parent.height - 64
            z: 3
            visible: !theme.isWhite()
        }

        Image {
            //x: 8 + 48 + 48
            x: 8
            y: parent.height - 56
            z: 3
            source: theme.isWhite() ? "../pics/tablet/rnd_br_first.png" : "../pics/rnd_br_first.png"
            width: 48
            height: 48
            opacity: 0.7
            visible: !theme.isTablet

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    newsPage.hide();
                }
            }
        }

        Image {
            x: parent.width - 56
            y: parent.height - 56
            z: 3
            source: theme.isWhite() ? "../pics/tablet/round_arrow_right.png" : "../pics/round_arrow_right.png"
            width: 48
            height: 48
            opacity: 0.7

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    moveToNext();
                }
            }
        }

        Image {
            x: parent.width - 8 - 48*2.5
            y: parent.height - 56
            z: 3
            source: theme.isWhite() ? "../pics/tablet/round_arrow_left.png" : "../pics/round_arrow_left.png"
            width: 48
            height: 48
            opacity: 0.7

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    moveToPrevious();
                }
            }
        }

        Image {
            id: toolbarIcon
            //x: 8
            x: parent.width - 8 - 48*4
            y: toolbar.y - 56
            z: 3
            source: theme.isWhite() ? "../pics/tablet/rnd_br_up.png" : "../pics/rnd_br_up.png"
            width: 48
            height: 48
            opacity: 0.7
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if(newsContent.state=="toolbarHidden") {
                        newsContent.state = "toolbarShown"
                    } else {
                        newsContent.state = "toolbarHidden"
                    }
                }
            }
        }

        Image {
            id: fullscreenIcon
            x: parent.width - 8 - 48*5.5
            y: parent.height - 56
            z: 3
            visible: window.isTablet
            source: theme.isWhite() ? "../pics/tablet/top_right_expand.png" : "../pics/top_right_expand.png"
            width: 48
            height: 48
            opacity: 0.7
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    newsPage.toggleFullscreen();
                }
            }
        }

        states: [
            State {
                name: "toolbarHidden"
                changes: [
                    PropertyChanges {
                        target: toolbar
                        y: newsPage.height
                    }
                ]
            },
            State {
                name: "toolbarShown"
                changes: [
                    PropertyChanges {
                        target: toolbar
                        y: newsPage.height - toolbar.height
                    },
                    PropertyChanges {
                        target: toolbarIcon
                        rotation: 180
                    }
                ]
            }
        ]

        transitions: Transition {
            ParallelAnimation {
                NumberAnimation { target: toolbarIcon; property: "rotation"; duration: 500; easing.type: "InOutCubic" }
                NumberAnimation { target: toolbar; property: "y"; duration: 500; easing.type: "InOutCubic" }
                NumberAnimation { target: newsContent; property: "height"; duration: 500; easing.type: "InOutCubic" }
            }
        }
    }

    Rectangle {
        id: toolbar
        width: parent.width
        height: 64
        z: 100
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#242" }
            GradientStop { position: 0.1; color: "#454" }
            GradientStop { position: 0.2; color: "#666" }
            GradientStop { position: 1.0; color: "#889088" }
        }

        Rectangle {
            width: parent.width
            height: 3
            color: "#1a1"
        }

        Row {
            anchors.horizontalCenter: parent.horizontalCenter
            //width: parent.width
            spacing: 12
            height: parent.height - 8
            y: 8

            Image {
                source: "../pics/star_fav_empty.png"

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        newsPage.markAsFavourite(true);
                        newsContent.state = "toolbarHidden";
                    }
                }
            }

            Image {
                source: "../pics/globe_2.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        newsPage.openInBrowser();
                        newsContent.state = "toolbarHidden";
                    }
                }
            }

            Image {
                source: "../pics/tag.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        tagDialog.state = "shown";
                        newsContent.state = "toolbarHidden";
                    }
                }
            }

            Image {
                source: "../pics/checkbox_checked.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        newsPage.markAsUnread();
                        newsContent.state = "toolbarHidden";
                    }
                }
            }

            Image {
                source: "../pics/facebook.png"
                width: 50
                height: 50
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        newsPage.shareToFacebook();
                    }
                }
            }
            Image {
                source: "../pics/twitter.png"
                width: 50
                height: 50
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        //http://twitter.com/home?status=Currently reading http://www.test.com/post-url
                        newsPage.shareToTwitter();
                    }
                }
            }
        }
    }

    TagDialog {
        id: tagDialog
        onClicked: {
            var item = newsPage.model.get(newsPage.index);
            console.log("Added " + tags + " to item " + item.id);
            newsPage.addTags(tags);
        }
    }

}
